import React, { useState } from 'react'
import { withRouter } from 'react-router-dom'
import Tabbar from '../../UI/Tabbar/Tabbar'
import TabbarItem from '../../UI/Tabbar/TabbarItem'
function Index(props) {
  let pathname = props.location.pathname

  if (!pathname || pathname === '/') {
    pathname = '/'
  } else {
    pathname = props.location.pathname.substr(1)
  }

  let [selectedTab, setSelectedTab] = useState(pathname)

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        width: '100%',
        height: '45px',
        borderTop: '1px solid #bebebe',
        paddingTop: '5px',
        background: '#ffffff'
      }}
    >
      <Tabbar
        fullScreen="bottom"
        unselectedTintColor="#bebebe"
        tintColor="#00ab68"
        barTintColor="#ffffff"
      >
        <TabbarItem
          title="首页"
          key="home"
          icon={
            <div>
              <img src={require('../../image/icon/home.png')} />
            </div>
          }
          selectedIcon={
            <div>
              <img src={require('../../image/icon/home_active.png')} />
            </div>
          }
          selected={selectedTab === '/'}
          onPress={() => {
            setSelectedTab((selectedTab = '/'))
            props.history.push('/')
          }}
        />
        <TabbarItem
          title="发现"
          key="find"
          icon={
            <div>
              <img src={require('../../image/icon/find.png')} />
            </div>
          }
          selectedIcon={
            <div>
              <img src={require('../../image/icon/find_active.png')} />
            </div>
          }
          selected={selectedTab === 'find'}
          onPress={() => {
            setSelectedTab((selectedTab = 'find'))
            props.history.push('/find')
          }}
        />
        <TabbarItem
          title="社区"
          key="community"
          icon={
            <div>
              <img src={require('../../image/icon/community.png')} />
            </div>
          }
          selectedIcon={
            <div>
              <img src={require('../../image/icon/community_active.png')} />
            </div>
          }
          selected={selectedTab === 'community'}
          onPress={() => {
            setSelectedTab((selectedTab = 'community'))
            props.history.push('/community')
          }}
        />
        <TabbarItem
          title="我的"
          key="my"
          icon={
            <div>
              <img src={require('../../image/icon/my.png')} />
            </div>
          }
          selectedIcon={
            <div>
              <img src={require('../../image/icon/my_active.png')} />
            </div>
          }
          selected={selectedTab === 'my'}
          onPress={() => {
            setSelectedTab((selectedTab = 'my'))
            props.history.push('/my')
          }}
        />
      </Tabbar>
    </div>
  )
}
export default withRouter(Index)
